import { _decorator, Component, v2, v3, Node, Vec2, UITransform, Camera, CCInteger } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Joystick')
export class Joystick extends Component {
    
    @property(Node)
    private center: Node;

    @property(CCInteger)
    private maxR: number = 60;

    @property(Camera)
    private uiCamera: Camera = null;

    public dir: Vec2 = v2(0, 0);

    private transform: UITransform = null;

    public onLoad(): void {
        this.transform = this.node.getComponent(UITransform);

        this.center.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.center.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
        this.center.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.center.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        
    }

    private onTouchStart(e){
        this.dir.x = this.dir.y = 0;
    }
    private onTouchMove(e){
        //获取触摸事件移动到的屏幕位置 
        var screenPos: Vec2 = e.getLocation();
        //摄像机， 通过UI相机显示，所以在UI相机节点下将触摸事件移动到的屏幕坐标转换成世界坐标
        var wPos = this.uiCamera.screenToWorld(v3(screenPos.x, screenPos.y, 0));
        //将触摸事件移动到的世界坐标转化成Joystick的节点下（局部）空间坐标系坐标，需要获取Joystick的Transform
        //将一个 UI 节点世界坐标系下点转换到另一个 UI 节点 (局部) 空间坐标系，这个坐标系以锚点为原点。
        var pos = this.transform.convertToNodeSpaceAR(wPos);
        //将屏幕坐标转化为Center所在节点坐标系下的坐标，即父节点父节点Joystick坐标系下的坐标，即pos
        //转换坐标过程中，pos.z可能不为0，UI摄像机是正交摄像机所以没影响，2d游戏所以把三维坐标pos中的z轴设置为0
        pos.z = 0;
        //最终设置摇杆Center的坐标，这样就实现了触摸移动时在UI相机下的屏幕坐标最终转换成摇杆center在父节点Joystick坐标系下的坐标
        //实现摇杆跟随手指移动。
        //将摇杆中心限制在摇杆背景圆里，所以要设置最大半径
        var len = pos.length();
        if(len > this.maxR){
            pos.x = pos.x * this.maxR / len;
            pos.y = pos.y * this.maxR / len;
            //注意限制后，记得把len同步改为maxR用于后续计算单位向量
            len = this.maxR;
        }

        //要给用户方向向量，要给单位向量即方向dir
        this.dir.x = pos.x /len; // cos(邻边比斜边，余弦角度)
        this.dir.y = pos.y /len; // sin(对边比斜边，正弦角度)
        this.center.setPosition(pos);

    }
    private onTouchEnd(e){
        this.dir.x = this.dir.y = 0;
        this.center.setPosition(0, 0);
    }
}


